<template>
    <view class="listGood" :class="{ listGoodRow: type == 'row' }" :style="{ width: resWidth }">
        <view class="listGood__left" @tap="_click('img')">
            <view class="listGood__label">{{ data.label }}</view>
            <image class="listGood__img" lazy-load :src="data.imgUrl" mode="aspectFill"></image>
        </view>
        <view class="listGood__content">
            <text class="listGood__title" @tap="_click('title')">{{ data.title }}</text>
            <text class="listGood__titleSub" v-if="data.titleSub" @tap="_click('titleSub')">{{ data.titleSub }}</text>
            <view class="listGood__sku" v-if="data.sku!=null" @tap="_click('sku')">
                {{ data.sku[0].name }}
                <uni-icon v-if="data.sku.length > 1" type="arrowdown" size="12" color="#fff"></uni-icon>
            </view>
            <view class="listGood__slot" @tap="_click('slot')">
                <slot></slot>
            </view>
        </view>
        <view class="listGood__bottom">
            <view class="listGood__price" @tap="_click('price')">
                {{ data.price }}
                <text v-if="data.originalPrice" class="listGood__price--original">{{ data.originalPrice }}</text>
            </view>
            <view class="listGoodNumbox" :style="{ 'padding-bottom': type == 'column' ? '0' : '8px' }" v-if="inputValue != null">
                <template v-if="(data.sku != null && data.sku.length > 1) || inputValue == 0">
                    <view class="listGoodNumbox__empty" @tap="_calcValue('add')">
                        <uni-icon size="20" type="plusempty" color="#fff"></uni-icon>
                        购物车
                        <uni-badge v-if="inputValue > 0" :text="inputValue" type="error">
                        	{{inputValue}}
                        </uni-badge>
                    </view>
                </template>
                <template v-else-if="inputValue > 0">
                    <view class="listGoodNumbox__minus" @click="_calcValue('subtract')">-</view>
                    <input class="listGoodNumbox__value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur" />
                    <view class="listGoodNumbox__plus" :class="{ listGoodNumbox__disabled: disableAdd }" @click="_calcValue('add')">+</view>
                </template>
                <template v-else>
                    <view class="listGoodNumbox__helper" :class="{ 'listGoodNumbox__helper--error': inputValue < -1 }" @tap="_click('numbox')"><slot name="numbox"></slot></view>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
    import uniIcon from '@/components/uni-icon/uni-icon.vue';
    import uniBadge from '@/components/uni-badge/uni-badge.vue';

    export default {
        components: {
            uniIcon,
            uniBadge
        },
        props: {
            type: {
                type: String,
                default: 'column'
            },
            data: {
                type: Object
            },
            index: {
                type: [Number, Array],
                default: 0
            },
            width: {
                type: String,
                default: '50%'
            },
            // 购物车按钮
            max: {
                type: Number,
                default: Infinity
            },
            step: {
                type: Number,
                default: 1
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                inputValue: this.data.size
            };
        },
        computed: {
            resWidth() {
                if (this.type === 'column') {
                    return 'auto';
                } else {
                    return this.width;
                }
            },
            disableAdd() {
                return this.value >= this.max;
            }
        },
        watch: {
            value(val) {
                this.inputValue = val;
            },
            inputValue(val) {
                this.$emit('change', val, this.index);
            }
        },
        methods: {
            _click(type) {
                this.$emit('click', this.index, type);
            },
            _calcValue(type) {
                const scale = this._getDecimalScale();
                let value = this.inputValue * scale;
                let step = this.step * scale;

                if (type === 'subtract') {
                    value -= step;
                } else if (type === 'add') {
                    value += step;
                }
                if (value > this.max) {
                    return;
                }
                this.inputValue = value / scale;
            },
            _getDecimalScale() {
                let scale = 1;
                // 浮点型
                if (~~this.step !== this.step) {
                    scale = Math.pow(10, (this.step + '').split('.')[1].length);
                }
                return scale;
            },
            _onBlur(event) {
                let value = event.detail.value;
                if (!value) {
                    this.inputValue = 0;
                    return;
                }
                value = +value;
                if (value > this.max) {
                    value = this.max;
                } else if (value < 0) {
                    value = 0;
                }
                this.inputValue = value;
            }
        }
    };
</script>

<style lang="scss">
    @import '@/style/mixin/flex.scss';
    @import '@/style/mixin/hr.scss';
    @import '@/style/mixin/text-overflow.scss';
    @import '@/style/mixin/price-before.scss';

    .listGood {
        position: relative;
        padding: 16upx 16upx 17upx 224upx;
        min-height: 192upx;

        &::before {
            @include hr(bottom, 16upx);
        }

        &:last-child {
            padding-bottom: 16upx;

            &::before {
                display: none;
            }
        }

        &__left {
            position: absolute;
            top: 16upx;
            left: 16upx;
            width: 192upx;
            height: 192upx;
            background-color: #fff;
        }

        &__img {
            display: block;
            width: 100%;
            height: 100%;
        }

        &__label {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            padding: 0 8upx;
            font-size: 20upx;
            color: #fff;
            background-color: $uni-color-error;
            border-radius: 0 0 8upx 0;
        }

        &__content {
            display: flex;
            flex-direction: column;
            min-height: 148upx;
            line-height: 1;
        }

        &__title {
            color: $uni-text-color;
            font-size: $uni-font-size-lg;
            font-weight: 700;
            padding-bottom: 16upx;
            @include text-overflow();
        }

        &__titleSub {
            color: $uni-color-subtitle;
            font-size: $uni-font-size-sm;
            padding-bottom: 16upx;
            @include text-overflow();
        }

        &__sku {
            align-self: flex-start;
            padding: 0 8upx;
            margin-bottom: 16upx;
            font-size: 20upx;
            color: #fff;
            background-color: $uni-text-color-disable;
            border-radius: 8upx;
        }

        &__slot {
            @include flex-self(full);
        }

        &__bottom {
            @include flex(null, bottom, null);
        }

        &__price {
            @include flex-self(full);
            line-height: 1;
            color: #dd524d;
            font-size: 44upx;

            &::before {
                @extend %__priceBefore;
            }

            &--original {
                padding-left: 16upx;
                color: $uni-text-color-grey;
                font-size: $uni-font-size-sm;
                text-decoration: line-through;

                &::before {
                    @extend %__priceBefore;
                }
            }
        }

        &Row {
            flex: none;
            box-sizing: border-box;
            padding: 8upx;

            &:last-child {
                padding-bottom: 8upx;
            }

            &::before {
                display: none;
            }
        }

        &Row &__left {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: inherit;
            padding-bottom: 100%;
        }

        &Row &__img {
            position: absolute;
            top: 0;
            left: 0;
        }

        &Row &__content {
            padding: 16upx 16upx 0;
            min-height: initial;
            background-color: #fff;
        }

        &Row &__sku {
            display: none;
        }

        &Row &__bottom {
            flex-direction: column;
            align-items: center;
            background-color: #fff;
        }

        &Row &__title {
            font-size: $uni-font-size-base;
        }

        &Row &__price {
            text-align: center;
            margin-bottom: 16upx;
        }

        &Numbox {
            @include flex(center, center);
            height: 40upx;

            &__minus,
            &__plus {
                @include flex-self(keep);
                width: 40upx;
                height: 40upx;
                text-align: center;
                line-height: 40upx;
                border-radius: 50%;
                color: #fff;
                background-color: $uni-color-primary;
            }

            &__value {
                width: 60upx;
                color: $uni-text-color;
                text-align: center;
            }

            &__disabled {
                background-color: $uni-text-color-disable;
            }

            &__empty {
                position: relative;
                @include flex(null, center);
                height: 40upx;
                line-height: 1;
                padding: 0 20upx 0 8upx;
                font-size: 24upx;
                color: #fff;
                background-color: $uni-color-primary;
                border-radius: 40upx;
                
                .uni-badge{
                    position: absolute;
                    right: 0;
                    top: -18upx;
                }
            }

            &__helper {
                @include flex(around, center);
                height: 40upx;
                box-sizing: border-box;
                min-width: 140upx;
                padding: 0 16upx;
                font-size: 24upx;
                color: $uni-color-warning;
                border: 1px solid $uni-color-warning;
                border-radius: 40upx;

                &--error {
                    color: $uni-color-error;
                    border: 1px solid $uni-color-error;
                }
            }
        }
    }
</style>
